import React,{useEffect,useState} from 'react'
import axios from '../../../utils/requset';
import '../../../api/index';
import {SETLIST,ALLSTATE,SETLISTACTIONTYPE} from '../../../types/store.d'
import {useDispatch,useSelector} from 'react-redux'
import {useNavigate,useParams,useLocation} from 'react-router-dom'
export default function Index() {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  useEffect(()=>{
      axios.get('/api/list').then(res=>{
        dispatch({
          type:SETLIST,
          payload:res.data.list
        })
      })
  },[])

  const listData = useSelector((state:ALLSTATE)=>{
      return state.list
  })
  //点击 要将所有的数据传入进去  所以要调用mock约束
  const handleClick=(params:SETLISTACTIONTYPE)=>{
      navigate('/detile',{
        state:params
      })
      console.log(params);
      
  }

  return (
    <div>
      <ul>
        
      </ul>
      {
        listData&&listData.map((item,index)=>{
          return <li key={index} onClick={()=>handleClick(item)}>
              {item.user}
              {item.title}
              <img src={item.img} alt="" />
          </li>
        })
      }
    </div>
  )
}

